<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('党员信息')" />
    <style>
        /* 页面整体样式 */
        .party-member-container {
            padding: 20px;
            background-color: #f8f9fa;
        }

        .filter-section {
            background-color: #fff;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .filter-section h3 {
            color: #333;
            margin-bottom: 15px;
        }

        .filter-section select,
        .filter-section input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }

        .filter-section button {
            background-color: #e74c3c;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .filter-section button:hover {
            background-color: #c0392b;
        }

        .stats-section {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }

        .stat-card {
            background-color: #fff;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .stat-card h3 {
            font-size: 24px;
            margin: 0;
        }

        .stat-card p {
            color: #777;
            margin: 5px 0 0;
        }

        .member-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }

        .member-card {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .member-card:hover {
            transform: translateY(-5px);
        }

        .member-card h4 {
            font-size: 18px;
            margin: 0 0 10px;
        }

        .member-card p {
            color: #777;
            margin: 5px 0;
        }

        .member-card a {
            display: block;
            background-color: #e74c3c;
            color: #fff;
            padding: 10px;
            text-align: center;
            border-radius: 3px;
            margin-top: 10px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .member-card a:hover {
            background-color: #c0392b;
        }
    </style>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>党员信息</h5>
                    </div>
                    <div class="ibox-content party-member-container">
                        <div class="filter-section">
                            <h3>党员筛选</h3>
                            <label for="branch">按支部</label>
                            <select id="branch">
                                <option value="all">全部支部</option>
                                <!-- 更多选项 -->
                            </select>

                            <label for="startYear">入党时间</label>
                            <input type="text" id="startYear" placeholder="开始年份">
                            <input type="text" id="endYear" placeholder="结束年份">

                            <label for="position">按职务</label>
                            <select id="position">
                                <option value="all">全部职务</option>
                                <!-- 更多选项 -->
                            </select>

                            <label for="keyword">关键词搜索</label>
                            <input type="text" id="keyword" placeholder="姓名/学号">
                            <button onclick="applyFilters()">筛选</button>
                            <button onclick="resetFilters()">重置</button>
                        </div>

                        <div class="stats-section">
                            <div class="stat-card">
                                <h3>189</h3>
                                <p>党员总数</p>
                            </div>
                            <div class="stat-card">
                                <h3>7</h3>
                                <p>党支部数量</p>
                            </div>
                            <div class="stat-card">
                                <h3>12</h3>
                                <p>本年度新发展党员</p>
                            </div>
                        </div>

                        <div class="member-list">
                            <div class="member-card">
                                <h4>张明</h4>
                                <p>机关第一党支部</p>
                                <p>入党时间: 2005年7月1日</p>
                                <p>职务: 支部书记</p>
                                <p>学历: 研究生</p>
                                <a href="#">查看入党志愿书</a>
                            </div>
                            <div class="member-card">
                                <h4>李华</h4>
                                <p>教学第一党支部</p>
                                <p>入党时间: 2010年5月20日</p>
                                <p>职务: 支部书记</p>
                                <p>学历: 博士</p>
                                <a href="#">查看入党志愿书</a>
                            </div>
                            <!-- 更多党员卡片 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />

    <script type="text/javascript">
        function applyFilters() {
            // 这里实现筛选逻辑
            console.log('应用筛选');
        }

        function resetFilters() {
            // 这里实现重置筛选逻辑
            console.log('重置筛选');
        }
    </script>
</body>
</html>